<template>
    <el-drawer v-model="drawer" class="draOut" :destroy-on-close="true" :with-header="false" size="65%" @close="close">
        <p class="draTitle">
            <span>【{{ title }}】- 【{{ rule_name }}】完成情况</span>
            <el-icon @click="close">
                <Close />
            </el-icon>
        </p>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="switchTab">
            <el-tab-pane label="未完成" :name="1"> </el-tab-pane>
            <el-tab-pane label="已完成" :name="2"> </el-tab-pane>
        </el-tabs>
        <el-scrollbar class="scrollbar">
            <ZwSearchForm ref="searchForm" row-num="3" :option="searchOption" @search="search" @reset="reset" />
            <ZwTable
                ref="tableRef"
                :page-sizes="[15, 25, 50, 100]"
                class="table-box"
                :option="tableOption"
                :row-key="getRowKey"
                :fetch-params="state.searchParams"
                :fetch-api="fetchApi()"
                @select-all="onSelectAll"
                @select="onSelect">
                <template #headerOperate>
                    <el-button
                        v-if="finishRow.trigger_type == 1 || finishRow.trigger_type == 2"
                        v-show="isShowBtn"
                        plain
                        :disabled="selectCust.length <= 0"
                        @click="remind(2, selectCust)">
                        批量任务提醒
                    </el-button>
                    <el-button
                        v-if="finishRow.trigger_type == 1"
                        v-show="isShowBtn"
                        plain
                        :disabled="selectCust.length <= 0"
                        @click="privateRemind(2, selectCust)">
                        批量群发提醒
                    </el-button>
                </template>
            </ZwTable>
        </el-scrollbar>

        <div>
            <el-drawer v-model="innerDrawer" title="预览内容" :append-to-body="true">
                <el-scrollbar class="innreScrollbar">
                    <div class="preview_cust">
                        <div class="push_msg">
                            <p class="msg_icon"></p>
                            <p class="msg_title">推送信息</p>
                        </div>
                        <el-form label-width="85px">
                            <el-form-item label="推送标题:">
                                <p class="msg_title">{{ previewCust.title }}</p>
                            </el-form-item>
                            <el-form-item label="推送对象:">
                                <el-scrollbar max-height="200px">
                                    <div
                                        v-for="(item, index) in previewCust.groupchat"
                                        :key="index"
                                        class="push_msg push_title">
                                        <div class="user_info">
                                            <el-image class="user_avatar" fit="cover" :src="item.avatar">
                                                <template #error>
                                                    <div class="image-slot">
                                                        <img style="width: 100%" :src="item.avatar" alt="" />
                                                    </div>
                                                </template>
                                            </el-image>
                                            <div class="groupInfo">
                                                <p class="groupInfo_info ellipsis">
                                                    <span class="text">{{ item.name }}</span>
                                                    <span class="num">({{ item.member_nums }})</span>
                                                </p>
                                                <p class="groupInfo_user ellipsis">
                                                    群主: {{ previewCust.work_user?.name }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </el-scrollbar>
                            </el-form-item>
                            <el-form-item label="执行人:">
                                <div class="push_msg push_title">
                                    <div class="user_info">
                                        <el-image class="user_avatar" fit="cover" :src="previewCust.work_user?.avatar">
                                            <template #error>
                                                <div class="image-slot">
                                                    <el-icon>
                                                        <icon-picture />
                                                    </el-icon>
                                                </div>
                                            </template>
                                        </el-image>
                                        <p class="user_name">{{ previewCust.work_user?.name }}</p>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="preview">
                        <div class="prev_box">
                            <div class="phone_con">
                                <el-scrollbar class="phone_List">
                                    <Friend ref="friend" :friend-detail="FriendDetail" />
                                </el-scrollbar>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </el-drawer>
        </div>
    </el-drawer>
    <Dialog :app-dialog="appDialog">
        <div class="title">您确定已经在企微端完成客户群SOP了吗？</div>
    </Dialog>
</template>

<script lang="tsx" setup>
import { ref, computed, reactive, watch } from 'vue';
import { useStore } from '@/store';
import ZwTable from '@/components/zw/table/Table';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import Dialog from '@/components/Dialog.vue';
import Friend from './Friend.vue';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import m from '.././../../../../assets/customer/manlogo.png';
import w from '.././../../../../assets/customer/womenlogo.png';
import { deepCopy } from '@/utils/helper';
import { getVideoImage, getSetionId } from '@/utils/utils';
import group_avatar from '@/assets/customer/group_avatar.png';

import {
    getGroupFulfilList,
    groupRemindSop,
    groupFulfil,
    previewGroupSop,
    GroupPrivate
} from '@/api/smartMarketing/sop';
import { ElButton, ElImage, ElIcon, ElMessage, ElScrollbar, ElPopover } from 'element-plus';

const DepartRef = (ref < null) | (HTMLElement > null);
const searchForm = ref(null);
const store = useStore();
const sels = ref();
const finishRow: any = ref({
    trigger_type: null
});

const tableRef = ref();
const drawer = ref(false);
const innerDrawer = ref(false);
const isShowBtn = ref(true);
const activeName = ref(1);
const title = ref('');
const rule_name = ref('');
const selectCust = ref([]);
const FriendDetail = ref([]);
const sendType = ref<number>(0);
const previewCust = ref({});
const findResult = reactive([
    {
        name: '全部',
        id: 0
    },
    {
        name: '未发送',
        id: 1
    },
    {
        name: '已发送',
        id: 2
    },
    {
        name: '因客户不是好友导致发送失败',
        id: 3
    },
    {
        name: '因客户已经收到其他群发消息导致发送失败',
        id: 4
    },
    {
        name: '私信发送成功',
        id: 5
    }
]);

const defaultParams = reactive({
    status: activeName.value,
    market_sop_id: '',
    market_sop_rule_id: '',
    owner_work_user_id: [],
    wxmsg_status: -1,
    send_status: -1,
    groupchat: '',
    push_time: [],
    page_size: 15
});
const remindParams: any = reactive({
    market_sop_id: null, //客户SOP主键ID
    market_sop_rule_id: null, //SOP规则ID
    remind_type: null, //1单个，2批量
    record_ids: [] //传推送记录id数组
});

const state = reactive({
    // searchParams: deepCopy(defaultParams)
    searchParams: defaultParams
});

const open = (val: string, row: any) => {
    const { id, market_sop_id, trigger_type } = row;
    sendType.value = trigger_type;
    finishRow.value = row;
    defaultParams.market_sop_id = remindParams.market_sop_id = market_sop_id;
    defaultParams.market_sop_rule_id = remindParams.market_sop_rule_id = id;
    rule_name.value = row.rule_name;
    title.value = val;
    drawer.value = true;
    state.searchParams.status = activeName.value = 1;
};
const findStaff = (id: any) => {
    const res = findResult.find((item: any) => item.id === id);
    return res;
};

const operate = {
    // prop: 'operate',
    label: '操作',
    fixed: 'right',
    width: 160,
    align: 'left',
    isOperate: true,
    renderOperate({ row, column, index }) {
        return (
            <div>
                <ElButton
                    size="small"
                    vShow={row.trigger_type === 1 && row.wxmsg_status === 1}
                    onClick={() => remind(1, row)}>
                    任务提醒
                </ElButton>
                <ElButton
                    size="small"
                    vShow={sendType.value === 2 ? true : row.trigger_type === 1 && row.send_status === 4}
                    onClick={() => privateRemind(1, row)}>
                    私信提醒
                </ElButton>
                <ElButton size="small" vShow={row.is_oneself == 1} onClick={() => finish(row)}>
                    完成
                </ElButton>
            </div>
        );
    }
};
const timer = {
    prop: 'complete_time',
    label: '完成时间',
    width: 160,
    fixed: 'right'
};
const checkObj = ref({
    type: 'selection',
    width: 55,
    fixed: 'left'
});
const failReason = ref({
    prop: 'fail_remark',
    label: '失败原因',
    width: 200
});
const switchTab = (val: any, e: any) => {
    searchForm.value.reset();
    defaultParams.status = val.props.name;
    state.searchParams = defaultParams;
};
watch(
    () => activeName.value,
    val => {
        if (val == 2) {
            isShowBtn.value = false;
            tableOption.value.splice(tableOption.value.length - 1, 1);
            tableOption.value.splice(0, 1);
            tableOption.value.splice(5, 1);
            tableOption.value.push(timer);
        } else if (val == 1) {
            isShowBtn.value = true;
            tableOption.value.splice(tableOption.value.length - 1, 1);
            tableOption.value.unshift(checkObj.value);
            tableOption.value.push(failReason.value);
            tableOption.value.push(operate);
            selectCust.value = [];
        }
    }
);
const searchOption = computed(() => {
    const arr = [
        {
            label: '选择群主',
            name: 'owner_work_user_id',
            value: [],
            type: 'select',
            placeholder: '请选择群主',
            multiple: true,
            popperClass: 'zw-hide_select_option',
            isUserSelect: true,
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '推送群聊',
            name: 'groupchat',
            value: '',
            type: 'input',
            placeholder: '请输入推送群聊'
        },
        {
            label: '推送时间',
            name: 'push_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间'
        },
        {
            label: '群主执行状态',
            name: 'wxmsg_status',
            value: '',
            type: 'select',
            placeholder: '请选择SOP状态',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve([
                        {
                            name: '全部',
                            id: -1
                        },
                        {
                            name: '未执行',
                            id: 1
                        },
                        {
                            name: '已执行',
                            id: 2
                        }
                    ]);
                });
            },
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '执行结果',
            name: 'send_status',
            value: '',
            type: 'select',
            placeholder: '请选择SOP状态',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve(findResult);
                });
            },
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        }
    ];
    if (sendType.value == 2) {
        arr.splice(arr.length - 2, 2);
    }
    return arr;
});
const tableOption = computed(() => {
    const arr = [
        {
            type: 'selection',
            width: 55,
            fixed: 'left',
            reserveSelection: true
        },
        {
            prop: 'name',
            label: '群主',
            width: 150,
            render({ row, column, index }) {
                return (
                    <div>
                        <span>{row.work_user?.name ? row.work_user?.name : '--'}</span>
                        <span vShow={row.is_oneself == 1}>(自己)</span>
                    </div>
                );
            }
        },
        {
            prop: 'trigger_type_name',
            label: '推送类型',
            width: 180
        },
        {
            prop: 'groupchat',
            label: '推送群聊',
            width: 300,
            showOverflowTooltip: true,
            render({ row, column, index }) {
                const slotReference = () => (
                    <div>
                        {row.groupchat.map((item: any, index: any) => {
                            if (index <= 1) {
                                return (
                                    <div class="group">
                                        <img
                                            width="36"
                                            height="36"
                                            style="border-radius: 4px"
                                            src={item.group_avatar ? item.group_avatar : group_avatar}
                                            alt=""
                                        />
                                        <div class="group_info">
                                            <p class="group_info_title">
                                                <span class="text">{item.name} </span>
                                                <span>({item.member_nums})</span>
                                            </p>
                                            <span class="group_info_user">
                                                群主: {row.work_user?.name ? row.work_user?.name : '--'}
                                            </span>
                                        </div>
                                    </div>
                                );
                            }
                        })}
                    </div>
                );
                const slotDefault = () => (
                    <div>
                        <ElScrollbar maxHeight="260px">
                            {row.groupchat.map((item: any) => {
                                return (
                                    <div style={popStyle}>
                                        <img width="36" height="36" src={item.group_avatar} alt="" />
                                        <div style="margin-left: 10px">
                                            <p style="line-height: 18px, font-size: 14px,display: flex,align-items: center;">
                                                <span style="display: inline-block,max-width: 130px,white-space: nowrap, text-overflow: ellipsis, overflow: hidden ">
                                                    {item.name}
                                                </span>
                                                <span>({item.member_nums})</span>
                                            </p>
                                            <span class="group_info_user">
                                                群主: {row.work_user?.name ? row.work_user?.name : '--'}
                                            </span>
                                        </div>
                                    </div>
                                );
                            })}
                        </ElScrollbar>
                    </div>
                );
                return (
                    <div>
                        <div vShow={row.groupchat.length <= 2}>
                            {row.groupchat.map((item: any) => {
                                return (
                                    <div class="group">
                                        <img
                                            width="36"
                                            height="36"
                                            style="border-radius: 4px"
                                            src={item.group_avatar}
                                            alt=""
                                        />
                                        <div class="group_info">
                                            <p class="group_info_title ellipsis">
                                                <span class="text">{item.name} </span>
                                                <span>({item.member_nums})</span>
                                            </p>
                                            <span class="group_info_user ellipsis">
                                                群主: {row.work_user?.name ? row.work_user?.name : '--'}
                                            </span>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                        <div vShow={row.groupchat.length > 2}>
                            <ElPopover
                                placement="top-start"
                                popper-class="popGroup"
                                trigger="hover"
                                vSlots={{ reference: slotReference, default: slotDefault }}
                                width={300}
                                popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"></ElPopover>
                        </div>
                    </div>
                );
            }
        },
        {
            prop: 'wxmsg_status',
            label: '群主执行状态',
            width: 120,
            render({ row, column, index }) {
                return <span>{row.wxmsg_status == 1 ? '未执行' : '已执行'}</span>;
            }
        },
        {
            prop: 'send_status',
            label: '执行结果',
            width: 150,
            showOverflowTooltip: true,
            render({ row, column, index }) {
                return <div class="zw-text-ellipsis">{findStaff(row.send_status)?.name}</div>;
            }
        },
        {
            prop: 'push_name',
            label: '推送标题',
            width: 180,
            render({ row }) {
                return <p>{row.push_name || '--'}</p>;
            }
        },
        {
            label: '推送内容',
            align: 'center',
            width: 100,
            render({ row, column, index }) {
                return (
                    <p style="color:#FF6B00;cursor: pointer" onClick={() => preview(row)}>
                        预览
                    </p>
                );
            }
        },
        {
            prop: 'push_time',
            label: '推送时间',
            width: 200
        },
        {
            prop: 'fail_remark',
            label: '失败原因',
            width: 200
        },
        {
            // prop: 'operate',
            label: '操作',
            width: 120,
            isOperate: true,
            fixed: 'right',
            renderOperate({ row, column, index }) {
                return (
                    <div>
                        <ElButton
                            size="small"
                            vShow={row.trigger_type === 1 && row.wxmsg_status === 1}
                            onClick={() => remind(1, row)}>
                            任务提醒
                        </ElButton>
                        <ElButton
                            size="small"
                            vShow={sendType.value === 2 ? true : row.trigger_type === 1 && row.send_status === 4}
                            onClick={() => privateRemind(1, row)}>
                            私信提醒
                        </ElButton>
                        <ElButton size="small" vShow={row.is_oneself == 1} onClick={() => finish(row)}>
                            完成
                        </ElButton>
                    </div>
                );
            }
        }
    ];
    if (sendType.value == 2) {
        arr.splice(4, 2);
    }
    return arr;
});
const popStyle = {
    width: '227px',
    height: '48px',
    ['border-radius']: '2px',
    padding: '6px',
    border: '1px solid #eaeaea',
    display: 'flex',
    ['align-items']: 'center',
    margin: '5px 0'
};
const getRowKey = (row: any) => {
    return row.id;
};

const fetchApi = () => {
    // 获取文件列表
    return getGroupFulfilList;
};
const height = computed(() => {
    return window.innerHeight - 300 + 'px';
});
// 选中表格 checkbox
const onSelect = (selection, row) => {
    const arr = [];
    selection.map((i: any) => {
        arr.push(i.id);
    });
    selectCust.value = arr;
};
// 全选
const onSelectAll = (selection: any) => {
    const arr = [];
    selection.map((item: any) => {
        arr.push(item.id);
    });
    selectCust.value = arr;
};
// 查询按钮
const search = (data: any) => {
    tableRef.value.getTable().clearSelection();
    const params = {
        ...defaultParams,
        ...data
    };
    state.searchParams = deepCopy(params);
};
const reset = (v?: any) => {
    tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy(defaultParams);
};
const close = () => {
    selectCust.value = [];
    drawer.value = false;
};
const getPhoneData = (data: any[], content?: string) => {
    const arr: any[] = [];
    if (content) {
        arr.push({
            type: 0,
            content: content
            // user_name: userName
        });
    }
    if (data.length > 0) {
        data.forEach((item: any) => {
            const obj = {
                type: 0,
                absolute_url: '',
                name: '',
                title: '',
                content: '',
                cover_image_url: '',
                file_size: '',
                user_name: '',
                mediaFileInfo: {
                    size: 0
                }
            };
            // 图片
            if (item.type == 1) {
                obj.type = 1;
                obj.absolute_url = item.absolute_url;
            }
            // 视频
            if (item.type == 2) {
                obj.type = 2;
                obj.thumbnail_url = getVideoImage(item.absolute_url, 80, 55);
            }
            // 链接
            if (item.type == 3) {
                obj.type = 3;
                obj.title = item.link_title;
                obj.cover_image_url = item.link_share_image;
            }
            // 音频
            if (item.type == 4) {
                obj.type = 4;
                obj.title = item.name;
                obj.file_size = item.size;
            }
            // 文件
            if (item.type == 5) {
                obj.type = 5;
                obj.name = item.name;
                obj.mediaFileInfo.size = item.size;
            }
            // 活动
            if (item.type == 6) {
                obj.type = 6;
                obj.title = item.link_title;
                obj.cover_image_url = item.link_share_image;
            }
            //电商素材-商品素材
            if (item.type == 7) {
                obj.type = item.type;
                obj.name = item.link_title;
                obj.cover_image_url = item.link_share_image;
            }
            //收集表
            if (item.type == 9) {
                obj.type = item.type;
                obj.name = item.link_title;
                obj.cover_image_url = item.link_share_image;
            }
            //公众号图文
            if (item.type == 10) {
                obj.type = item.type;
                obj.name = item.link_title;
                obj.cover_image_url = item.link_share_image;
            }
            //小程序
            if (item.type == 11) {
                obj.type = 11;
                obj.title = item.title;
                obj.cover_image_url = item.absolute_url;
            }
            arr.push(obj);
        });
    }
    FriendDetail.value = arr;
};
// 预览
const preview = (row: any) => {
    previewGroupSop({ market_sop_record_id: row.id }).then((data: any) => {
        previewCust.value = data;
        innerDrawer.value = true;
        getPhoneData(data.welcome_info.welcome_material, data.welcome_info.welcome_text);
    });
};
// 批量提醒及提醒
const remindFn = (params: any) => {
    groupRemindSop(params).then((res: any) => {
        ElMessage.success('提醒成功！');
        selectCust.value = [];
        tableRef.value.getTable().clearSelection();
    });
};
// 提醒
const remind = (type: number, row: any) => {
    remindParams.remind_type = type;
    remindParams.record_ids = type === 1 ? [row.id] : row;
    remindFn(remindParams);
};
const finId = ref({
    market_sop_record_id: ''
});
// 私信接口
const privateApi = (params: any) => {
    GroupPrivate(params).then((res: any) => {
        ElMessage.success('提醒成功！');
        selectCust.value = [];
        tableRef.value.getTable().clearSelection();
    });
};
// 私信提醒
const privateRemind = (type: number, row: any) => {
    remindParams.remind_type = type;
    remindParams.record_ids = type === 1 ? [row.id] : row;
    privateApi(remindParams);
};
// 完成
const finish = (row: any) => {
    finId.value.market_sop_record_id = row.id;
    appDialog.visible = true;
};
const cancelHandel = () => {
    appDialog.visible = false;
};
const submitHandel = () => {
    groupFulfil(finId.value).then((res: any) => {
        ElMessage.success('操作成功！');
        reset();
        cancelHandel();
    });
};
// 弹框配置项
const appDialog = reactive({
    visible: false,
    title: '完成',
    width: '30%',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定',
    isInit: false, //是否重置
    isChooseDisabled: false, //重新打开传递进来的数据是否重置
    chooseArr: [] // 传递进来选中的数据
});
const handleClose = (done: () => void) => {};
defineExpose({
    open,
    state
});
</script>
<style lang="scss" scoped>
.draTitle {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px #eaeaea solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search {
    padding: 16px 24px 0;
    background: #f9f9f9;
}

.custObj {
    display: flex;
    align-items: center;

    :deep &_avatar {
        width: 36px;
        height: 36px;
        border-radius: 4px;
        margin-right: 10px;
    }

    .ffs {
        color: pink;
        background: url('../../../../../assets/customer/manlogo.png') no-repeat center/100%;
    }
}

.preview {
    overflow: hidden;

    .prev_box {
        flex: 1;

        .phone_con {
            position: relative;
            margin: 20px auto;
            width: 244px;
            height: 495px;
            box-sizing: border-box;
            border-radius: 36px;
            border: 9px solid #eef5fe;
            background: url('@/assets/image/channel/phone_bg.png');
            background-size: cover;

            .phone_List {
                width: 100%;
                box-sizing: border-box;
                position: absolute;
                top: 48px;
                height: 380px;
                bottom: 48px;
                padding: 7px 10px;
            }
        }
    }

    .pre_list {
        margin: 15px 30px;
        width: 370px;
        overflow: auto;
        background: #f7f7f7;
        border-radius: 1px;
        padding-left: 20px;
        padding-bottom: 1px;
        box-sizing: border-box;

        .pre_main {
            padding-top: 12px;

            .pre_list_item {
                margin-bottom: 16px;
                display: flex;
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                text-align: left;

                .pre_item_con {
                    flex: 1;
                    color: #33302d;
                }
            }

            .pre_item_label {
                margin-bottom: 16px;
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                display: flex;

                .item_name {
                    display: flex;
                    flex-direction: column;

                    .bg_name:nth-child(n + 2) {
                        margin-top: 10px;
                    }
                }
            }

            .send_box {
                display: flex;
                width: 100%;
                font-size: 12px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                transform: scale(0.83);
                transform-origin: left top;
                margin-bottom: 4px;
                color: #33302d;

                .send_box_name {
                    display: inline-block;
                    width: 98px;
                }
            }
        }
    }
}

.push_msg {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .msg_icon {
        width: 3px;
        height: 14px;
        background: #ff6b00;
    }

    .msg_title {
        margin-left: 3px;
        font-size: 14px;
    }

    .user_info {
        width: 227px;
        height: 48px;
        box-sizing: border-box;
        padding: 6px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #ffc69e;
        display: flex;
        align-items: center;

        .user_avatar {
            width: 36px;
            height: 36px;
            border-radius: 4px;
            margin-right: 10px;
        }

        .groupInfo {
            width: calc(100% - 46px);
            height: 100%;

            &_info {
                font-size: 14px;
                line-height: 14px;

                .text {
                    max-width: 146px;
                    display: inline-block;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .num {
                    margin-top: -2px;
                }
            }

            &_user {
                font-size: 12px;
                color: #969696;
                line-height: 12px;
                margin-top: 6px;
            }

            .ellipsis {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .user_name {
            width: calc(100% - 46px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

:deep .sopBtn {
    padding: 4px 16px 2px;
    margin: 3px;
    min-height: 0;
}

.title {
    text-align: center;
    padding: 50px 0;
}

:deep .group {
    width: 227px;
    height: 48px;
    border-radius: 2px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    margin: 5px 0;

    &_info {
        width: calc(100% - 36px);
        margin-left: 10px;

        &_title {
            line-height: 18px;
            font-size: 14px;
            display: flex;
            align-items: center;

            .text {
                display: inline-block;
                max-width: 130px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }

        &_user {
            color: #969696;
            font-size: 12px;
            display: block;
        }

        .ellipsis {
            width: calc(100% - 6px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.tabBar {
    position: relative;
    z-index: 9999;
}

.table-box {
    padding-right: 10px;
}

.scrollbar {
    height: calc(100vh - 155px);
    overflow-y: auto;
}

.innreScrollbar {
    height: calc(100vh - 155px);
    overflow-y: auto;
}
</style>
